<template>
  <div class="home-seach">
    <van-button type="primary" to="/search"  size="large" plain round >开始搜索</van-button>
  </div>
  <div class="hotCategories">
      <div v-for="item in hotCategories">
        <img :src="item.pictureUrl" alt="">
        {{ item.title }}
      </div>
  </div>
</template>

<script setup>
  import useHomeStore from "@/stores/modules/home"
  import { storeToRefs } from "pinia";

  const homeStore = useHomeStore()
  const {hotCategories} =storeToRefs(homeStore)
  homeStore.getHotCategories()

</script>

<style lang="less" scoped>
    .home-seach {
        margin: 10px auto;
        :deep(.van-button) {
          background-color: var(--primary-color);
        }
    }
    .hotCategories {
      display: flex;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        flex-shrink: 0;
        padding:5px 10px;
        text-align: center;
        width: 15vw;
        img {
          width: 12.5vw;
        }
      }
      
    }
</style>